<template>
  <div class="card">
    <my-image class="my-img fade" :imgUrl="soursePath+data.imgUrl" @click.native="clickDetailsHandle"></my-image>
    <div class="card-content">
        <div class="name">{{data.itemName}}</div>
        <div v-if="data.type=='0'" class="price-div">
          <span class="symbol">&yen;</span><span class="price">{{data.price}}元</span>
        </div>
        <mt-button v-else size="small" class="detail-btn" type="default">详情</mt-button>
    </div>
  </div>
</template>

<script>
import myImage from "../../lazyloadImg/lazyImage.vue";
import Vue from "vue";
import { Button } from "mint-ui";
import "mint-ui/lib/button/style.css";
Vue.component(Button.name, Button);
import { mapState } from "vuex";

export default {
  name: "v-card",
  props: {
    data: {
      type: Object
    }
  },
  components: {
    myImage
  },
  created() {},
  methods: {
    clickDetailsHandle(event) {
      // this.$router.push({ name: "details" });
    }
  },
  computed: {
    ...mapState(["openid", "role", "phoneno", "userid",'soursePath'])
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
.card {
  background-color: #fefefe;
  padding: 0.1rem;
  box-sizing: border-box;
  position relative;
  height 100%;

  // 宽高比为1：0.65
  .my-img {
    width: 100%;
    height 100%;
    // height: 1.5rem;
    background-color: #f1f1f1;
  }

  .card-content {
    height: 0.38rem;
    position: absolute;
    bottom: .1rem;
    left .1rem;
    right .1rem;
    background-color: rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    padding: 0 0.1rem 0 0.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .name {
      color: #fff;
      font-size: 0.13rem;
      letter-spacing: 0.01rem;
    }

    .price-div {
      position: relative;
      top: 0.01rem;
      color: #e61874;

      .symbol {
        font-size: 0.12rem;
        margin-right: 0.02rem;
      }

      .price {
        font-size: 0.14rem;
      }
    }

    .detail-btn{
      height: .24rem;
      background-color #b37287;
      color #fff;
      font-size .12rem; 
      box-shadow none;
      letter-spacing 0.01rem;
    }
  }
}
</style>
